<template>
  <!-- 自定义组件的名称：至少两个单词；依赖大驼峰命名法区分单词 -->
  <!-- 大驼峰：XiAn 每个单词首字母大写 -->
  <!-- 因为：系统组件/标签 都是1个单词；自定义的组件为了区分，所以要求至少两个单词 -->

  <!-- (非强制):根组件的class 和 标签名相同，但是class应该全小写 -->
  <div class="my-nav">
        <ul>
            <li 
            v-for="(itme , i ) in items" 
            :key="i"
            @click="now = i" 
            :class="{active : now == i}">
                {{itme}}
            </li>
        </ul>
  </div>
</template>

<script>
export default {
    // 为什么data是函数
    // 因为 组件需要复用，每次使用触发data函数生成 独立的作用域，这里的变量 是独立的，不会互相影响
    data() {
        return {
            now:0,
            items: ['首页','关于我们','公司动态','产品中心','联系我们'],
        }
    },
};
</script>

<style lang="scss" scoped>
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
ul{
    display: flex;
    background-color: darkblue;
    li{
        user-select: none;
        cursor: pointer;
        color: white;
        padding: 10px 25px;
        &.active{
            background-color: orange;
        }
    }
}
</style>